<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
					<router-link :to="'/home/newsList/link/'+item.id">
						<img class="mui-media-object mui-pull-left" src="https://pic.qqtn.com/up/2018-12/2018120707560621742.jpg">
						<div class="mui-media-body">
							<h1>{{ item.title }}</h1>
							<p class="mui-ellipsis"><span>发布时间: {{ item.add_time | filters }} </span> <span>点击: {{ item.click }}</span></p>
						</div>
					</router-link>
				</li>
			</ul>
    </div> 
</template>

<script>
    import { Toast } from 'mint-ui'
    export default {    
        data:function(){
            return {
                newsList: ''
            }
        },
        created: function(){
            this.getnwesList()
        },
        methods: {
            getnwesList: function(){
                this.$http.get('http://127.0.0.1:4000/newslist').then(function(res){
                    //console.log(res)
                     if(res.status != 200 || res.ok != true){
                        Toast('获取失败')
                    }else{
                        console.log(res.body)
                        this.newsList = res.body.newslist
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mui-table-view {
        li {
            h1 {
                font-size: 14px;
            }
            p {
                font-size: 12px;
                color: #007ACC;
                 display: flex;
                 justify-content: space-between;
                }
        }
    }
    
</style>